<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script src="js/highcharts.js"></script>
<script src="js/sankey.js"></script>
<script src="js/exporting.js"></script>
<script src="js/export-data.js"></script>
<script src="js/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Sankey charts are used to visualize data flow and volume
    between nodes. The wider lines indicate larger volumes.
  </p>
</figure>

<style>
.highcharts-button, /*隐藏右上角按钮*/
text, /*隐藏图中的文字*/
#csv {
	display: none;
}

#container{
	width:800px;
	height:600px;
}

.highcharts-figure, .highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
</style>


<style>
/* for my color list*/
#colors{width:500px; margin:0 auto;}
#colors div{ display:inline-block; width:50px; height:30px;}
</style>
<div id="colors">My color list:
	<div style="background:#E41E25">1</div>
	<div style="background:#FBD800">2</div>
	<div style="background:#208A41">3</div>
	<div style="background:#446CFF">4</div>
	<div style="background:#36AFE5">5</div>
	<div style="background:#AF4A9C">6</div>
</div>
<br>

<script>
/*
https://codepen.io/pen/?&editable=true=https%3A%2F%2Fwww.highcharts.com%2Fsamples%2Fhighcharts%2Fdemo%2Fsankey-diagram%3Fcodepen
https://code.highcharts.com/highcharts.js
https://code.highcharts.com/modules/sankey.js

//https://www.highcharts.com/demo/sankey-diagram
*/

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Sankey Diagram'
  },
  accessibility: {
    point: {
      valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
    }
  },
  
  series: [{
	//指定定点node的颜色
	colors: ["#E41E25", "#FBD800", "#208A41", "#446CFF", "#36AFE5", "#AF4A9C"],
	
	//输入数据，可以支持多层流动: ['a','b',1], ['b','c',2], ['c','d',4]
    keys: ['from', 'to', 'weight', 'color'],
    data: [ 
	//1. 左右列的顺序就是第一次出现的顺序
	//2. 颜色是按照第一次出现的顺序定义的
	//3. band颜色默认是按照左边的颜色，淡化后。	
      ['Brazil', 'Portugal', 5, '#BBBBBB', ], //
/*
The key thing to realise is that there are two ways to colour your chart:
(1)点 The series colours (series[].colors) will colour the nodes.
(2)线 The series data (series[].data[].color) colour your flows.
*/
      ['Brazil', 'France', 1],
      ['Brazil', 'Spain', 1],
      ['Brazil', 'England', 1],
      ['Canada', 'Portugal', 1],
      ['Canada', 'France', 5],
      ['Canada', 'England', 1],
   
    ],
    type: 'sankey',
    name: 'Sankey demo series'
  }]
});
</script>

